<template>
    <div class="home_tip">
        <!-- 常见科室结构 -->
        <div class="department">
            <div class="herder">
                <div class="left">
                    <el-icon color="lightcoral">
                        <SwitchFilled />
                    </el-icon>
                    <span>常见科室</span>
                </div>
                <div class="right">
                    <span @click="prompt">全部</span>
                    <el-icon>
                        <ArrowRight />
                    </el-icon>
                </div>
            </div>
            <ul @click="prompt" class="content">
                <li>神经内科</li>
                <li>消化内科</li>
                <li>呼吸内科</li>
                <li>内科</li>
                <li>神经外科</li>
                <li>妇科</li>
                <li>产科</li>
                <li>儿科</li>
            </ul>
        </div>
        <!-- 平台的公告 -->
        <div class="notice">
            <div class="herder">
                <div class="left">
                    <el-icon color="lightblue">
                        <BellFilled />
                    </el-icon>
                    <span>平台公告</span>
                </div>
                <div class="right">
                    <span @click="prompt">全部</span>
                    <el-icon>
                        <ArrowRight />
                    </el-icon>
                </div>
            </div>
            <ul @click="prompt" class="content">
                <li title="网友爆上海开市客临期产品不标注正价销售"><span>·</span>网友爆上海开市客临期产品不标注正价销售</li>
                <li title="泰国国会开启总理选举议程，今天下午开始正式投票"><span>·</span>泰国国会开启总理选举议程，今天下午开始正式投票</li>
                <li title="原银监会副主席蔡鄂生一审被控受贿超5亿元"><span>·</span>原银监会副主席蔡鄂生一审被控受贿超5亿元</li>
                <li title="福岛核污水排海问题中的韩国：今天的姑息也许就是明天的代价"><span>·</span>福岛核污水排海问题中的韩国：今天的姑息也许就是明天的代价</li>
            </ul>
        </div>
        <!-- 听诊公告 -->
        <div class="Discontinuing">
            <div class="herder">
                <div class="left">
                    <el-icon color="yellowgreen">
                        <MuteNotification />
                    </el-icon>
                    <span>停诊公告</span>
                </div>
                <div class="right">
                    <span @click="prompt">全部</span>
                    <el-icon>
                        <ArrowRight />
                    </el-icon>
                </div>
            </div>
            <ul @click="prompt" class="content Discontinuing_content">
                <li title="全面提升医疗质量行动计划（2023-2025年）"><span>·</span>全面提升医疗质量行动计划（2023-2025年）</li>
                <li title="至2030年全球医疗行业将现13%劳动力缺口"><span>·</span>至2030年全球医疗行业将现13%劳动力缺口</li>
                <li title="莲子米呛进气管，七旬老人猛咳了一个多月"><span>·</span>莲子米呛进气管，七旬老人猛咳了一个多月</li>
                <li title="苏州医疗团队切除肿瘤同时保住患者脾脏免疫功能"><span>·</span>苏州医疗团队切除肿瘤同时保住患者脾脏免疫功能</li>
            </ul>
        </div>
    </div>
</template>
<script setup lang="ts">
import { SwitchFilled, ArrowRight, BellFilled, MuteNotification } from '@element-plus/icons-vue';
// @ts-ignore
import { ElMessage } from 'element-plus'
// 引入节流函数
import throttle from '@/utils/throttle'
const prompt = throttle(() => {
    ElMessage({
        message: '该功能还在维护中...',
        type: 'warning',
    })
}, 1000, 0)
</script>
<style scoped lang="scss">
.home_tip {
    padding: 10px 0;
    color: #7f7f7f;

    .department {
        margin-bottom: 24px;

        .content {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            li {
                width: 44%;
                margin-bottom: 8px;
                cursor: pointer;
            }

            li:hover {
                color: lightcoral;
            }
        }
    }

    .Discontinuing,
    .notice {
        margin-bottom: 24px;

        .content {

            li {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 8px;
                cursor: pointer;

                span {
                    color: lightblue;
                }
            }

            li:hover {
                color: lightblue;
            }
        }

        .Discontinuing_content {
            li {
                span {
                    color: yellowgreen;
                }
            }

            li:hover {
                color: yellowgreen;
            }
        }
    }


    // 所有头部
    .herder {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        .left,
        .right {
            display: flex;
            align-items: center;

            span {
                margin: 0 4px;
                color: black;
            }

            span:hover:nth-child(1) {
                font-weight: 700;
                cursor: pointer;
            }
        }
    }
}
</style>